<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}

			.mui-views,
			.mui-view,
			.mui-pages,
			.mui-page,
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #efeff4;
			}

			.mui-pages {
				top: 46px;
				height: auto;
			}

			.mui-scroll-wrapper,
			.mui-scroll {
				background-color: #efeff4;
			}

			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 300ms ease;
				transition: transform 300ms ease;
			}

			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}

			.mui-ios .mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}

			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}

			.mui-navbar .mui-bar {
				position: absolute;
				background: transparent;
				text-align: center;
			}

			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}

			.mui-ios .mui-navbar-left .mui-left,
			.mui-ios .mui-navbar-left .mui-center,
			.mui-ios .mui-navbar-left .mui-right {
				opacity: 0;
			}

			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}

			.mui-navbar .mui-bar .mui-title {
				display: inline-block;
				width: auto;
			}

			.mui-page-shadow {
				position: absolute;
				right: 100%;
				top: 0;
				width: 16px;
				height: 100%;
				z-index: -1;
				content: '';
			}

			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}

			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
				transition: opacity 300ms ease, transform 300ms ease;
			}

			.mui-page {
				display: none;
			}

			.mui-pages .mui-page {
				display: block;
			}

			.mui-page .mui-table-view:first-child {
				margin-top: 15px;
			}

			.mui-page .mui-table-view:last-child {
				margin-bottom: 30px;
			}

			.mui-table-view {
				margin-top: 20px;
			}

			.mui-table-view span.mui-pull-right {
				color: #999;
			}

			.mui-table-view-divider {
				background-color: #efeff4;
				font-size: 14px;
			}

			.mui-table-view-divider:before,
			.mui-table-view-divider:after {
				height: 0;
			}

			.head {
				height: 40px;
			}

			#head {
				line-height: 40px;
			}

			.head-img {
				width: 40px;
				height: 40px;
			}

			#head-img1 {
				position: absolute;
				bottom: 10px;
				right: 40px;
				width: 40px;
				height: 40px;
			}

			.update {
				font-style: normal;
				color: #999999;
				margin-right: -25px;
				font-size: 15px
			}

			.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}

			.mui-ios .mui-navbar .mui-bar .mui-title {
				position: static;
			}

			/*问题反馈在setting页面单独的css*/
			#feedback .mui-popover {
				position: fixed;
			}

			#feedback .mui-table-view:last-child {
				margin-bottom: 0px;
			}

			#feedback .mui-table-view:first-child {
				margin-top: 0px;
			}

			.mui-plus.mui-plus-stream .mui-stream-hidden {
				display: none !important;
			}

			/*问题反馈在setting页面单独的css==end*/
		</style>
		<link rel="stylesheet" type="text/css" href="css/feedback.css" />

	</head>

	<body class="mui-fullscreen">
	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div id="app" class="mui-views">
				<div class="mui-view">
					<div class="mui-navbar">
					</div>
					<div class="mui-pages">
					</div>
				</div>
			</div>
			<!--页面主结构结束-->
			<!--单页面开始-->
			<div id="setting" class="mui-page">
				<!--页面标题栏开始-->
				<div class="mui-navbar-inner mui-bar mui-bar-nav">
					<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span>
					</button>
					<h1 class="mui-center mui-title">设置</h1>
				</div>
				<!--页面标题栏结束-->
				<!--页面主内容区开始-->
				<div class="mui-page-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell mui-media">
			
									<a class="mui-navigate-right" href="#account">
										<!-- 	<img class="mui-media-object mui-pull-left head-img" id="head-img" src=""> -->
										<img class="mui-media-object mui-pull-left head-img" src="images/logo.png">
										<div id="maimx" class="mui-media-body">
			
											{{userName}}
											<p class='mui-ellipsis'>学号:{{loginName}}</p>
										</div>
									</a>
			
								</li>
							</ul>
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell">
									<a href="#account" class="mui-navigate-right">账号与安全</a>
								</li>
							</ul>
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell">
									<a href="#notifications" class="mui-navigate-right">新消息通知</a>
								</li>
								<li class="mui-table-view-cell">
									<a href="#1privacy" class="mui-navigate-right">隐私</a>
								</li>
								<li class="mui-table-view-cell">
									<a href="#1general" class="mui-navigate-right">通用</a>
								</li>
								<!-- 
									<li class="mui-table-view-cell">
										<a href="#lock" class="mui-navigate-right">设置锁屏图案</a>
									</li> -->
			
							</ul>
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell">
									<a href="#about" class="mui-navigate-right">得实e学精简版 <i class="mui-pull-right update">V1.3.0</i></a>
								</li>
							</ul>
							<ul class="mui-table-view">
								<li class="mui-table-view-cell" style="text-align: center;">
									<a id='exit'>退出登录</a>
			
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!--页面主内容区结束-->
			</div>
			
			
			<!--单页面结束-->
			<div id="account" class="mui-page">
				<div class="mui-navbar-inner mui-bar mui-bar-nav">
					<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span>设置
					</button>
					<h1 class="mui-center mui-title">账号与安全</h1>
				</div>
				<div class="mui-page-content">
					<div class="mui-scroll-wrapper">
						<div id="gxxx" class="mui-scroll">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<a id="head" class="mui-navigate-right">头像
										<span class="mui-pull-right head">
											<!-- <img class="head-img mui-action-preview" id="head-img1" src=""/> -->
											<img class="head-img mui-action-preview" src="images/logo.png" />
										</span>
									</a>
								</li>
								<li class="mui-table-view-cell">
									<a>姓名<span class="mui-pull-right">{{userName}}</span></a>
								</li>
								<li class="mui-table-view-cell">
									<a>学号<span class="mui-pull-right">{{loginName}}</span></a>
								</li>
							</ul>
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<a>系别<span class="mui-pull-right">{{academyTitle}}</span></a>
								</li>
								<li class="mui-table-view-cell">
									<a>手机号<span class="mui-pull-right">{{mobile}}</span></a>
								</li>
								<li class="mui-table-view-cell">
									<a>邮箱地址<span class="mui-pull-right">{{email}}</span></a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			
			
			<div id="lock" class="mui-page">
				<div class="mui-navbar-inner mui-bar mui-bar-nav">
					<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span>设置
					</button>
					<h1 class="mui-center mui-title">锁屏图案</h1>
				</div>
				<div class="mui-page-content">
					<div class="mui-content-padded">
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								使用手势解锁
								<div id="lockState" class="mui-switch">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
						</ul>
						<div class="mui-locker" data-locker-width='320' data-locker-height='320' data-locker-options='{"ringColor":"rgba(221,221,221,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}'>
						</div>
					</div>
				</div>
			</div>
			
			<div id="notifications" class="mui-page">
				<div class="mui-navbar-inner mui-bar mui-bar-nav">
					<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span>设置
					</button>
					<h1 class="mui-center mui-title">新消息通知</h1>
				</div>
				<div class="mui-page-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<a>接收新版本通知<span class="mui-pull-right">已开启</span></a>
								</li>
							</ul>
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									通知显示消息详情
									<div class="mui-switch mui-active mui-switch-mini">
										<div class="mui-switch-handle"></div>
									</div>
								</li>
							</ul>
							<div class="mui-content-padded">
								<p>若关闭，当收到新消息时，通知提示将不显示发信人和内容摘要</p>
							</div>
			
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell">
									<a href="#notifications_disturb" class="mui-navigate-right">功能消息免打扰</a>
								</li>
							</ul>
							<div class="mui-content-padded">
								<p>设置系统功能消息提示声音和震动的时段</p>
							</div>
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<a>接收新消息通知<span class="mui-pull-right">已开启</span></a>
								</li>
							</ul>
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									声音
									<div class="mui-switch mui-active mui-switch-mini">
										<div class="mui-switch-handle"></div>
									</div>
								</li>
								<li class="mui-table-view-cell">
									震动
									<div class="mui-switch mui-active mui-switch-mini">
										<div class="mui-switch-handle"></div>
									</div>
								</li>
							</ul>
							<div class="mui-content-padded">
								<p>当软件在运行时，你可以设置是否需要声音或者震动</p>
							</div>
							<div></div>
						</div>
					</div>
				</div>
			</div>
			
			
			<div id="notifications_disturb" class="mui-page">
				<div class="mui-navbar-inner mui-bar mui-bar-nav">
					<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span>新消息通知
					</button>
					<h1 class="mui-center mui-title">功能消息免打扰</h1>
				</div>
				<div class="mui-page-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view mui-table-view-radio">
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">开启</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">只在夜间开启</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">关闭</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div id="privacy" class="mui-page">
				<div class="mui-navbar-inner mui-bar mui-bar-nav">
					<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span>设置
					</button>
					<h1 class="mui-center mui-title">隐私</h1>
				</div>
				<div class="mui-page-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								<li class="mui-table-view-divider">通讯录</li>
								<li class="mui-table-view-cell">
									加我为朋友时需要验证
									<div class="mui-switch mui-active mui-switch-mini">
										<div class="mui-switch-handle"></div>
									</div>
								</li>
							</ul>
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									向我推荐QQ好友
									<div class="mui-switch mui-switch-mini">
										<div class="mui-switch-handle"></div>
									</div>
								</li>
								<li class="mui-table-view-cell">
									通过QQ号搜索到我
									<div class="mui-switch mui-switch-mini">
										<div class="mui-switch-handle"></div>
									</div>
								</li>
							</ul>
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									可通过手机号搜索到我
									<div class="mui-switch mui-active mui-switch-mini">
										<div class="mui-switch-handle"></div>
									</div>
								</li>
								<li class="mui-table-view-cell">
									向我推荐通讯录朋友
									<div class="mui-switch mui-switch-mini">
										<div class="mui-switch-handle"></div>
									</div>
								</li>
								<li class="mui-table-view-divider">开启后，为你推荐已经开通HBuilder的手机联系人</li>
							</ul>
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									通过HBuilder账号搜索到我
									<div class="mui-switch mui-active mui-switch-mini">
										<div class="mui-switch-handle"></div>
									</div>
								</li>
								<li class="mui-table-view-divider">关闭后，其他用户将不能通过HBuilder号搜索到你</li>
							</ul>
			
						</div>
					</div>
				</div>
			</div>
			<div id="general" class="mui-page">
				<div class="mui-navbar-inner mui-bar mui-bar-nav">
					<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span>设置
					</button>
					<h1 class="mui-center mui-title">通用</h1>
				</div>
				<div class="mui-page-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									多语言
								</li>
							</ul>
			
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									听筒模式
									<div class="mui-switch mui-switch-mini">
										<div class="mui-switch-handle"></div>
									</div>
								</li>
							</ul>
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									功能
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			
			<div id="about" class="mui-page">
				<div class="mui-navbar-inner mui-bar mui-bar-nav">
					<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span>设置
					</button>
					<h1 class="mui-center mui-title">关于得实e学精简版</h1>
				</div>
				<div class="mui-page-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								<!-- <li class="mui-table-view-cell mui-plus-visible mui-stream-hidden">
									<a id="rate" class="mui-navigate-right">评分鼓励</a>
								</li> -->
								<!-- <li class="mui-table-view-cell mui-plus-visible">
									<a id="welcome" class="mui-navigate-right">欢迎页</a>
								</li> -->
								<li class="mui-table-view-cell mui-plus-visible">
									<a id="share" class="mui-navigate-right">分享推荐</a>
								</li>
								<li class="mui-table-view-cell">
									<a id="tel" class="mui-navigate-right">客服QQ</a>
								</li>
								<li class="mui-table-view-cell">
									<a id="feedback-btn" href="#feedback" class="mui-navigate-right">问题反馈</a>
								</li>
								<li id="check_update" class="mui-table-view-cell mui-plus-visible">
									<a id="update" class="mui-navigate-right">检查更新</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			
			<div id="feedback" class="mui-page feedback">
				<div class="mui-navbar-inner mui-bar mui-bar-nav">
					<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span>关于得实e学
					</button>
					<button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">发送</button>
					<h1 class="mui-center mui-title">问题反馈</h1>
				</div>
				<div class="mui-page-content">
					<div class="mui-content-padded">
						<div class="mui-inline">问题和意见</div>
						<a class="mui-pull-right mui-inline" href="#popover">
							快捷输入
							<span class="mui-icon mui-icon-arrowdown"></span>
						</a>
						<!--快捷输入具体内容，开发者可自己替换常用语-->
						<div id="popover" class="mui-popover">
							<div class="mui-popover-arrow"></div>
							<div class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<ul class="mui-table-view">
										<!--仅流应用环境下显示-->
										<li class="mui-table-view-cell stream">
											<a href="#">桌面快捷方式创建失败</a>
										</li>
										<li class="mui-table-view-cell"><a href="#">界面显示错乱</a></li>
										<li class="mui-table-view-cell"><a href="#">启动缓慢，卡出翔了</a></li>
										<li class="mui-table-view-cell"><a href="#">偶发性崩溃</a></li>
										<li class="mui-table-view-cell"><a href="#">UI无法直视，丑哭了</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="row mui-input-row">
						<textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
					</div>
					<p>图片(选填,提供问题截图,总大小10M以下)</p>
					<div id='image-list' class="row image-list"></div>
					<p>QQ/邮箱</p>
					<div class="mui-input-row">
						<input id='contact' type="text" class="mui-input-clear contact" placeholder="(选填,方便我们联系你 )" />
					</div>
					<div class="mui-content-padded">
						<div class="mui-inline">应用评分</div>
						<div class="icons mui-inline" style="margin-left: 6px;">
							<i data-index="1" class="mui-icon mui-icon-star"></i>
							<i data-index="2" class="mui-icon mui-icon-star"></i>
							<i data-index="3" class="mui-icon mui-icon-star"></i>
							<i data-index="4" class="mui-icon mui-icon-star"></i>
							<i data-index="5" class="mui-icon mui-icon-star"></i>
						</div>
					</div><br />
				</div>
			</div>
			
		</div>
	<script src="js/mui.min.js"></script>
	<script src="js/mui.view.js "></script>
	<script src='libs/easymob-webim-sdk/jquery-1.11.1.js'></script>
	<script src='libs/easymob-webim-sdk/strophe-custom-2.0.0.js'></script>
	<script src='libs/easymob-webim-sdk/json2.js'></script>
	<script src="libs/easymob-webim-sdk/easemob.im-1.0.5.js"></script>
	<script src='js/feedback.js'></script>
	<script src="js/feedback-page.js"></script>
	<script src="js/mui.locker.js"></script>
	<script src="js/app.js"></script>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style:'circle',
						callback: pulldownRefresh
					},
					up: {
						auto:true,
						contentrefresh: '正在加载...',
						
					}
				}
			});
			
			var count = 0;
			function pullupRefresh() {
				setTimeout(function() {
				
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					
					}
				}, 1000);
			}

			
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					addData();
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					mui.toast("为你推荐了5篇文章");
				}, 1500);
			}

		</script>
	</body>

</html>